<template>
	<view class="login container" :style="[{'font-weight':Style,'font-family':Font}]" @tap.stop="closeMenu">
		<view class="left-bottom-sign"></view>
		<view class="right-top-sign"></view>
		<view class="back-btn yticon cuIcon-back" @click="navBack" v-if="isshow"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper" >
			<view class="left-top-sign">I P</view>
			<view class="welcome">
				请设置IP端口！
			</view>
			<view class="input-content">
				<view style="display: flex;align-items: center;">
					<view class="left-view" @tap="switchP">{{http}}</view>
					<wInput :oBorder="'oBordertwo'" :isShow="IP" :mainlist="'main-listtwo'" v-model="IP" type="text" maxlength="40"
					 placeholder="IP/域名">
						<text style="padding-right: 20rpx;" @tap="clean" v-show="IP" slot="icon" class="lg text-gray cuIcon-roundclosefill"></text>
						<text slot="unfold" :class="['lg text-gray cuIcon-unfold',viewName]" @tap.stop="active"></text>
						<view style="transition: all 0.3s ease-in-out;z-index: 9;" slot="screen" class="grid text-center col-1 screen"
						 v-show="isactive">
							<view class="padding-sm flex borderS" v-for="(item,index) in list" :key="index">
								<view style="flex: 9;" @tap.stop="selection(item)">{{item}}</view>
								<text @tap.stop="cleanList(index)" class="lg text-gray cuIcon-roundclosefill"></text>
							</view>
						</view>
					</wInput>
				</view>
				<wInput v-model="PORT" type="text" maxlength="11" placeholder="端口"></wInput>
			</view>
			<wButton text="确 认" :rotate="isRotate" @click.native="startLogin()"></wButton>
		</view>
		<view class="register-section">
			<text>安徽柠徽信息工程有限公司</text>
		</view>
	</view>
</template>

<script>
	import {
		postlogin
	} from "@/service/login";
	import wInput from "@/colorui/components/watch-input.vue"; //input
	import wButton from "@/colorui/components/watch-button.vue"; //button
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				http: 'http://',
				IP: "",
				PORT: "",
				list: [],
				viewName: 'isviewClose',
				isactive: false,
				isshow: false,
				logoImage: "../../static/images/logo.png",
				isRotate: false //是否加载旋转
			};
		},
		computed: {
			...mapGetters(["Style", 'Font', ])
		},
		onLoad() {
			this.list = uni.getStorageSync("httpList")
		},
		onShow() {
			this.IP = uni.getStorageSync('IP').split("//")[1] || '60.173.239.156';
			this.PORT = uni.getStorageSync('PORT') || '8443'
			this.isshow = true
		},
		components: {
			wInput, //input
			wButton //button
		},
		methods: {
			navBack() {
				uni.navigateBack();
			},
			//清除数据
			clean() {
				this.IP = ''
			},
			closeMenu() {
				this.viewName = 'isviewClose'
				this.isactive = false
			},
			cleanList(index) {
				console.log(index);
				this.list.splice(index, 1)
				console.log(this.list);
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				uni.setStorage({
					key: "httpList",
					data: this.list,
					success: function() {}
				})
			},
			active() {
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
				this.isactive = !this.isactive
			},
			switchP() {
				this.http = (this.http == 'http://' ? 'https://' : 'http://')
			},
			selection(item) {
				this.IP = item
				this.viewName = (this.viewName == 'isviewOpen' ? 'isviewClose' : 'isviewOpen')
				this.isactive = false
				var result = this.list.some((val) => {
					if (val == item) {
						return true;
					}
				})
				if (!result) {
					this.list.push(item)
				}
			},
			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				let n = (this.IP.split('.')).length - 1;
				if (n == 2 || n == 3) {
					if (this.IP.length == "" || this.PORT.length == "") {
						uni.showToast({
							icon: "none",
							position: "bottom",
							title: "端口不能为空"
						});
						return;
					} else {
						//登录成功将账号和密码缓存
						global.tree = true
						var result = this.list.some((item) => {
							if (item == this.IP) {
								return true;
							}
						})
						if (!result) {
							this.list.push(this.IP)
						}
						uni.setStorage({
							key: "httpList",
							data: this.list,
							success: function() {}
						})
						uni.setStorage({
							key: "IP",
							data: this.http + this.IP,
							success: function() {}
						});
						uni.setStorage({
							key: "PORT",
							data: this.PORT,
							success: function() {}
						});
						this.$http.req.defaultData.baseUrl = this.http + this.IP + ':' + this.PORT + '/api'
						console.log(this.$http.req.defaultData.baseUrl);
						// 跳转到login
						uni.redirectTo({
							url: `../login`
						});
						uni.showToast({
							title: "设置成功",
							duration: 2000
						});
					}
					this.isRotate = false;
				} else {
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "IP错误"
					});
				}

			},
		}
	};
</script>

<style lang="scss">
	@import "../../../static/css/main.css";

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn,
	.back-btn2 {
		position: absolute;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 50upx;
		color: $font-color-dark;
	}

	.back-btn {
		left: 40upx;
	}

	.back-btn2 {
		right: 40upx;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}

	.input-content {
		padding: 0 60upx;

		.left-view {
			background-color: #f5f7fa;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			padding: 34rpx;
		}

		.screen {
			position: absolute;
			top: 100%;
			left: -2rpx;
			width: 100%;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			background-color: #f5f7fa;
		}
		
		.borderS {
			border-bottom: 2rpx solid #EEEEEE;
		}
		.borderS:last-child {
			border:none;
		}
		.isviewOpen {
			transform: rotate(180deg);
		}

		.isviewClose {
			transform: rotate(0deg);
		}
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
